<template>
    <el-container>
        <el-header>OpenAI API with Element Plus</el-header>
        <el-main>
            <el-input v-model="textInput" placeholder="Enter text"></el-input>
            <el-button @click="callOpenAI">Submit</el-button>
            <el-card v-if="apiResponse">
                <div class="text">Response: {{ apiResponse }}</div>
            </el-card>
        </el-main>
    </el-container>
</template>
  
<script>
import { ElButton, ElInput, ElContainer, ElHeader, ElMain, ElCard } from 'element-plus';
import axios from 'axios';

export default {
    components: {
        ElButton, ElInput, ElContainer, ElHeader, ElMain, ElCard
    },
    data() {
        return {
            textInput: '',
            apiResponse: null
        };
    },
    methods: {
        async callOpenAI() {
            try {
                let qmessages = [];
                qmessages.push({
                    role: "user",
                    content: this.textInput
                });
                const response = await axios.post('https://openai.api2d.net/v1/chat/completions', {
                    model: "gpt-4-1106-preview",
                    messages: qmessages,

                    // presence_penalty: 0,
                    stream: true,

                    top_p: 1,
                    temperature: 0.3,
                    presence_penalty: 0.6,
                    frequency_penalty: 0
                }, {
                    headers: {
                        'content-type': 'application/json',
                        'Authorization': `Bearer fk213277-Ju5VeebU8fgNiSK89MtA1cYl2aD8Agpy`,
                    }
                });
                console.log('response', response.data)
                //this.apiResponse = response.data.choices[0].text;
            } catch (error) {
                console.error('There was an error calling the OpenAI API:', error);
            }
        }
    }
};
</script>
  
<style>
/* Add any additional CSS styling here */
</style>
  